<template>
  <el-row class="container">
    <el-col :span="24">
      <el-row>
        <el-col :span="24"><h2>布展——设置特展</h2></el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="21" :offset="3">
          <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
            <el-row>
              <el-col :span="4" class="selec-floor">选择楼层：</el-col>
              <el-col :span="20">
                <el-form-item>
                  <el-select v-model="floorId" @change="floorSelected" clearable size="mini" placeholder="请选择">
                    <el-option
                      v-for="item in option"
                      :key="item.id"
                      :label="item.floorName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :offset="3" :span="21" style="position: relative">
          <el-transfer
            target-order="push"
            :button-texts="['<<', '>>']"
            :titles="['已布展展品','特展展品']"
            v-model="specialExhibit"
            :data="allExhibit"
            :props="{
              key: 'exhibitId',
              label: 'mainTitle'
            }"
          ></el-transfer>
          <!-- <el-button type="primary" @click="toTop" :disabled="!istoTop" style="position:absolute;left: 318px;top:60% ">设为特展</el-button> -->
          <div style="margin-top: 20px;margin-left: 450px">
            <el-button type="primary" :disabled="!alreadyExhibit.length" @click="resetAreaExhibit">恢复</el-button>
            <el-button type="success" :disabled="!specialExhibit.length" @click="onSubmit">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import AppSelector from '@/components/AppSelector'

  export default {
    components: {
      'app-selector':AppSelector,
    },
    data() {
      return {
        form: { //区域搜索框
          name: '',
          page: 1,
          size: 9999
        },
        floorId: null, // 楼层id
        option:[], //楼层数据
        allExhibit: [], // 楼层已布展 + 特展数据
        specialExhibit:[], //楼层特展数据
        alreadyExhibit:[], // 楼层已布展数据
      }
    },
    methods: {
      initData() {
        ApiClient.get('/backend/common/floorList.do',{page:1,size:9999}).then(data => {
          let array = _.map(_.cloneDeep(data),function(v){v.name = v.floorName;v.cities = [];return v});
          this.option = array // 获取楼层数据
        });
      },
      onSubmit() {
        let len = this.specialExhibit.length;
        if( len > 1 || len === 0 ){ // 特展为多或空时，提示并阻止提交
          this.onlySpecial(len);
          return;
        }
        this.$confirm('确定设置为特展?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          ApiClient.post('/backend/areaExhibit/addSpecial.do',{
            floorId: this.floorId,
            exhibitId: this.specialExhibit[0]
          }).then(data => { console.log(data); });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      // 楼层选择change事件处理
      floorSelected(value){
        if(value){
          this.floorId = value;
          this.getAllExhibit(value);
        }else{ //执行清楚操作
          this.floorId = null;
          this.alreadyExhibit = [];
          this.specialExhibit = [];
        }
      },
      // 楼层布展数据
      getAllExhibit(id){
        let promises = ['/backend/areaExhibit/floorDetail.do', '/backend/areaExhibit/floorDetailSpecial.do'].map( (ajaxUrl) => {
          return ApiClient.get(ajaxUrl,{floorId:id});
        });
        Promise.all(promises).then(posts => {
          this.alreadyExhibit = posts[0]; // 已布展数据
          this.specialExhibit = posts[1] ? [ posts[1].exhibitId ] : []; // 特展数据
          this.allExhibit = posts[0].concat(posts[1] ? [ posts[1] ] : []);  // 全部布展数据
        });
      },
      //恢复操作
      resetAreaExhibit(){
        this.getAllExhibit(this.floorId);
      },
      // 提示特展唯一
      onlySpecial(length) {
        if(length === 1)return;
        let content;
        if( length === 0 ){
          content = "当前楼层还没有设置特展"
        }else if( length > 1 ){
          content = "特展展品只能设置一个，请移除多余特展展品"
        }
        this.$alert( content, '特展展品设置', {
          confirmButtonText: '知道了'
        });
      }
    },
    watch: {
      specialExhibit: function(val){ // 监听特展个数
        this.onlySpecial(val.length)
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>
<style  lang="scss">
  .container {
    .el-transfer-panel{
      width:300px;
      .el-transfer-panel__body{
        height:500px;
        .el-transfer-panel__list{
          height:500px;
        }
      }
    }
    .el-transfer__button{
      padding-left:30px;
      padding-right:30px;
      .el-icon-arrow-left{
        display: none;

      }
      .el-icon-arrow-right{
        display: none;
      }
    }
    .selec-floor{
      padding: 8px 1em 0 0;
      text-align: right;
    }
  }
</style>

